<template>
  <div class="page-wrap n-hot active">
    <div class="swiper-header movie-ad"></div>
    <div class="tab-block">
      <div class="tab-content">
        <div class="page n-hot" data-hot=".n-hot" data-cid="c_dmLad">
          <div id="top-rated-wrap">
            <div class="top-rated">
              <p class="title">最受好评电影</p>
              <div class="top-rated-list view-scroll-x-container">
                <router-link
                  :to="'/detail/' + top_rated_item.filmId"
                  class="link top-rated-item"
                  v-for="top_rated_item in computed_top_rated_items"
                  :key="top_rated_item.filmId"
                >
                  <div class="poster default-img-bg">
                    <img
                      :src="top_rated_item.poster"
                      :alt="top_rated_item.name"
                    />
                    <span class="wish-bg"></span>
                    <span class="score">
                      观众评分
                      <span class="rated-score">{{
                        top_rated_item.grade
                      }}</span>
                    </span>
                  </div>
                  <h5 class="name line-ellipsis">
                    {{ top_rated_item.name }}
                  </h5>
                </router-link>
              </div>
            </div>
          </div>
          <div class="list-wrap">
            <van-list
              v-model="loading"
              :finished="finished"
              finished-text="没有更多了"
              @load="onLoad"
              :immediate-check="false"
            >
              <router-link
                :to="'/detail/' + router_link_active.filmId"
                class="link item"
                v-for="router_link_active in router_link_actives"
                :key="router_link_active.filmId"
              >
                <div class="main-block">
                  <div class="avatar">
                    <div class="default-img-bg">
                      <img :src="router_link_active.poster" alt="" />
                    </div>
                  </div>
                  <div class="mb-outline-b content-wrapper">
                    <div class="column content">
                      <div class="box-flex movie-title">
                        <div class="title line-ellipsis v2dimax_title">
                          {{ router_link_active.name }}
                        </div>
                        <span
                          :class="
                            'version v' +
                            router_link_active.item.name.toLocaleLowerCase() +
                            ' imax'
                          "
                        ></span>
                      </div>
                      <div class="detail column">
                        <div class="score line-ellipsis">
                          <span class="score-suffix">观众评分</span
                          ><span class="grade">{{
                            router_link_active.grade
                              ? router_link_active.grade
                              : "暂无评分"
                          }}</span>
                        </div>
                        <div class="actor line-ellipsis">
                          主演:{{ router_link_active.actors | actors }}
                        </div>
                        <div class="show-info line-ellipsis">
                          {{ router_link_active.nation }}|{{
                            router_link_active.premiereAt | setTime
                          }}上映
                        </div>
                      </div>
                    </div>
                    <div class="button-block" data-id="1277950">
                      <router-link 
                          class="btn normal"
                          style="
                          background-color: #f03d37;
                          box-shadow: 0 0.04rem 0.04rem 0
                            rgba(240, 61, 55, 0.15);
                        "
                          :to="'/film/'+router_link_active.filmId+'/cinames'">
                        <span class="fix">购票</span>
                      </router-link>
                    </div>
                  </div>
                </div>
              </router-link>
            </van-list>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import http from "@/utils/htttp.js";
import { mapState, } from "vuex";
import * as moment from "moment";
import Vue from "vue";
import { List } from "vant";
Vue.use(List);
moment.locale(["zh-cn", "zh-tw"]);
export default {
  data() {
    return {
      top_rated_items: [],
      router_link_actives: [],
      total: 0,
      loading: false,
      finished: false,
      pageNum: 1,
      defaultCityId:0
    };
  },
  methods: {
    getLocation() {
      return new Promise((res, rej) => {
        new BMap.Geolocation().getCurrentPosition((position) => {
          http("/getlocation", {
            params: {
              x: position.point.lat,
              y: position.point.lng,
            },
          }).then((data) =>
            res(data.data.datas.addressComponent.city.substring(0, 2))
          );
        });
      });
    },
    getCityid(name) {
      return new Promise((res, rej) => {
        http("/getcitylists").then((data) => {
          res({CityId:data.data.cities.filter((city) => city.name == name)[0].cityId,origin:data.data.cities});
        });
      });
    },
    // 最受好评数据
    getHotDatas(id,vuexid) {
      http("hot", {
        params: {
          cityId: vuexid||id,
          pageNum: 1,
          pageSize: 100,
          type: 1,
        },
      }).then((res) => {
        res.data.data.films.forEach((item) => {
          item.grade == undefined && (item.grade = 0);
        });
        let maxIndex = res.data.data.films.length - 1,
          temp,
          flag;
        //手动筛选出评分前十位作为最受好评电影
        for (var i = maxIndex; i > 0; i--) {
          flag = true;
          for (var j = 0; j < i; j++) {
            if (
              res.data.data.films[j].grade > res.data.data.films[j + 1].grade
            ) {
              temp = res.data.data.films[j];
              res.data.data.films[j] = res.data.data.films[j + 1];
              res.data.data.films[j + 1] = temp;
              flag = false;
            }
          }
          if (!flag) {
            continue;
          }
        }
        let moreLikes = res.data.data.films.slice(maxIndex - 9);
        this.top_rated_items = moreLikes;
        //   console.log(this.top_rated_items);
      });
    },
    //推荐数据
    getRecommendDatas(id,vuexid) {
      http("/hot", {
        params: {
          cityId: vuexid||id,
          pageNum: this.pageNum,
          pageSize: 10,
          type: 1,
        },
      }).then((res) => {
        this.total = res.data.data.total;
        this.router_link_actives = res.data.data.films;
      });
    },

    onLoad() {
      if (this.total === this.router_link_actives.length) {
        this.finished = true;
        return;
      }
      this.pageNum++;
      //懒加载推荐数据
      http("/hot", {
        params: {
          cityId: this.cityId||this.defaultCityId,
          pageNum: this.pageNum,
          pageSize: 10,
          type: 1,
        },
      }).then((res) => {
        this.router_link_actives = [
          ...this.router_link_actives,
          ...res.data.data.films,
        ];
        this.loading = false;
      });
    },
  }, 
  computed: {
    computed_top_rated_items() {
      return this.top_rated_items;
    },
    ...mapState("city", ["cityId"]),
  },
  filters: {
    actors(actorsarr) {
      if(!actorsarr) return ''
      let srtName = actorsarr.map((item) => {
        return item.name;
      });
      srtName = srtName.splice(1).toString();
      return srtName;
    },
    setTime(time) {
      return moment(time * 1000).format("LL");
    },
  },
  async mounted() {
    let nowcityName = await this.getLocation();
    let {CityId} = await this.getCityid(nowcityName);
    this.defaultCityId = CityId
    this.getHotDatas(CityId,this.cityId);
    this.getRecommendDatas(CityId,this.cityId)
  },
};
</script>
<style  scoped>
#movie_main,
body,
html {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
body {
  font-size: 0.28rem;
  color: #777;
  overflow: hidden;
  margin: 0;
}

.page.active {
  display: block;
  margin-bottom: 1rem;
}
.page.singleton,
.page.singleton-notab {
  overflow: hidden;
  flex: 1;
  position: relative;
  -webkit-overflow-scrolling: touch;
}
.page {
  width: 100%;
  flex: auto;
}
.page .page-wrap.n-hot {
  background-color: #f5f5f5;
}
.page .page-wrap.active {
  display: block;
  height: 100%;
}
.page.singleton-notab .page-wrap,
.page.singleton .page-wrap {
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  position: absolute;
}
.top-rated {
  padding: 12px 15px;
  background-color: #fff;
  margin-bottom: 10px;
}
.top-rated .title {
  font-size: 14px;
  color: #333;
  margin: 0 0 12px;
}
.top-rated-list {
  overflow: scroll;
  white-space: nowrap;
}
.top-rated-item {
  display: inline-block;
  width: 85px;
  overflow: hidden;
  margin-right: 10px;
}
.link {
  cursor: pointer;
  text-decoration: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.top-rated-item .poster {
  width: 85px;
  height: 115px;
  position: relative;
  margin-bottom: 6px;
}
.default-img-bg {
  background-color: #e1e1e1;
  background-size: 100% 100%;
}
.top-rated-item .name {
  font-size: 13px;
  color: #222;
  margin: 0 0 3px;
}
.line-ellipsis {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.top-rated-item .poster img {
  height: 100%;
}
img {
  width: 100%;
}
.top-rated-item .poster .wish-bg {
  display: inline-block;
  width: 100%;
  height: 35px;
  position: absolute;
  bottom: 0;
  background-image: linear-gradient(-180deg, rgba(77, 77, 77, 0), #000);
}
.top-rated-item .poster .score,
.top-rated-item .poster .wish {
  position: absolute;
  left: 4px;
  bottom: 2px;
  color: #faaf00;
  font-size: 11px;
  font-weight: 600;
}
/*  */
.classic .list-wrap,
.f-hot .list-wrap,
.n-hot .list-wrap {
  background-color: #f5f5f5;
}
.classic .list-wrap .item .main-block,
.f-hot .list-wrap .item .main-block,
.n-hot .list-wrap .item .main-block {
  position: relative;
  width: 100%;
}
.classic .list-wrap .item .avatar,
.f-hot .list-wrap .item .avatar,
.n-hot .list-wrap .item .avatar {
  width: 1.28rem;
  height: 1.9rem;
  position: relative;
  margin-top: 0.24rem;
  float: left;
}
.classic .list-wrap .item .avatar:before,
.f-hot .list-wrap .item .avatar:before,
.n-hot .list-wrap .item .avatar:before {
  content: "";
  display: block;
  position: absolute;
  width: 0.92rem;
  height: 0.92rem;
  background-repeat: no-repeat;
  background-size: contain;
}
.default-img-bg {
  background-color: #e1e1e1;
  background-size: 100% 100%;
}
.classic .list-wrap .item .avatar img,
.f-hot .list-wrap .item .avatar img,
.n-hot .list-wrap .item .avatar img {
  background-color: transparent;
  height: 1.8rem;
}
.classic .list-wrap .item .content-wrapper,
.f-hot .list-wrap .item .content-wrapper,
.n-hot .list-wrap .item .content-wrapper {
  padding: 0.24rem 0.28rem 0.24rem 0;
  margin-left: 1.48rem;
  height: 1.8rem;
  max-height: 1.8rem;
  position: relative;
}
@media (-webkit-min-device-pixel-ratio: 2),
  (-webkit-min-device-pixel-ratio: 3) {
  .mb-line-all,
  .mb-line-b,
  .mb-line-l,
  .mb-line-lr,
  .mb-line-r,
  .mb-line-t,
  .mb-line-tb,
  .mb-outline-b,
  .mb-outline-t,
  .mb-outline-tb {
    background-size: 1px 1px;
  }
}
.mb-outline-b {
  background: url(//s0.meituan.net/bs/myfe/canary/file/touchnode/images/dpmmweb/img/base/base64/repeat-x-bottom-outline.png)
    0 bottom repeat-x;
}
.classic .list-wrap .item .content,
.f-hot .list-wrap .item .content,
.n-hot .list-wrap .item .content {
  padding-right: 0.1rem;
  margin-right: 0.96rem;
  overflow: hidden;
}
.classic .list-wrap .item .button-block,
.f-hot .list-wrap .item .button-block,
.n-hot .list-wrap .item .button-block {
  font-size: 0.24rem;
  position: absolute;
  right: 0.28rem;
  top: 0;
  bottom: 0;
  height: 0.54rem;
  margin: auto;
}
.classic .list-wrap .item,
.f-hot .list-wrap .item,
.n-hot .list-wrap .item {
  padding-left: 0.3rem;
  background-color: #fff;
}
.classic .list-wrap .item .movie-title,
.f-hot .list-wrap .item .movie-title,
.n-hot .list-wrap .item .movie-title {
  max-height: 0.48rem;
  margin-bottom: 0.14rem;
  line-height: 0.48rem;
  overflow: hidden;
}
.box-flex {
  display: flex;
}
.classic .list-wrap .item .name,
.classic .list-wrap .item .title,
.f-hot .list-wrap .item .name,
.f-hot .list-wrap .item .title,
.n-hot .list-wrap .item .name,
.n-hot .list-wrap .item .title {
  font-size: 0.34rem;
  color: #333;
  font-weight: 700;
  padding-right: 0.1rem;
  flex-shrink: 1;
}
.line-ellipsis {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.classic .list-wrap .version.v2d.imax,
.f-hot .list-wrap .version.v2d.imax,
.n-hot .list-wrap .version.v2d.imax {
  width: 0.86rem;
  background-image: url(//s0.meituan.net/bs/myfe/canary/file/touchnode/images/dpmmweb/hot-tab/img/base64/v2dimax.png);
}
.classic .list-wrap .version.v3d,
.f-hot .list-wrap .version.v3d,
.n-hot .list-wrap .version.v3d {
  background-image: url(//s0.meituan.net/bs/myfe/canary/file/touchnode/images/dpmmweb/hot-tab/img/base64/v3d.png);
}
.classic .list-wrap .pre-show,
.classic .list-wrap .version,
.f-hot .list-wrap .pre-show,
.f-hot .list-wrap .version,
.n-hot .list-wrap .pre-show,
.n-hot .list-wrap .version {
  background-size: contain;
  background-repeat: no-repeat;
  height: 0.28rem;
  width: 0.34rem;
  display: inline-block;
  margin-top: 0.1rem;
  flex: 0 0 auto;
  margin-right: 0.06rem;
}
.classic .list-wrap .item .detail,
.f-hot .list-wrap .item .detail,
.n-hot .list-wrap .item .detail {
  box-sizing: border-box;
  line-height: 1;
  overflow: hidden;
}
.classic .list-wrap .item .detail .actor,
.classic .list-wrap .item .detail .no-score,
.classic .list-wrap .item .detail .score,
.classic .list-wrap .item .detail .show-date,
.classic .list-wrap .item .detail .show-info,
.f-hot .list-wrap .item .detail .actor,
.f-hot .list-wrap .item .detail .no-score,
.f-hot .list-wrap .item .detail .score,
.f-hot .list-wrap .item .detail .show-date,
.f-hot .list-wrap .item .detail .show-info,
.n-hot .list-wrap .item .detail .actor,
.n-hot .list-wrap .item .detail .no-score,
.n-hot .list-wrap .item .detail .score,
.n-hot .list-wrap .item .detail .show-date,
.n-hot .list-wrap .item .detail .show-info {
  font-size: 0.26rem;
  color: #666;
}
.classic .list-wrap .item .detail > div + div,
.f-hot .list-wrap .item .detail > div + div,
.n-hot .list-wrap .item .detail > div + div {
  margin-top: 0.12rem;
  line-height: 0.3rem;
}
.line-ellipsis {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.classic .list-wrap .item .button-block .btn,
.f-hot .list-wrap .item .button-block .btn,
.n-hot .list-wrap .item .button-block .btn {
  width: 1.08rem;
  height: 0.56rem;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  background-color: #f03d37;
  color: #fff;
  white-space: nowrap;
  font-size: 0.26rem;
  font-weight: 500;
  cursor: pointer;
  border-radius: 0.27rem;
}
.classic .list-wrap .item .detail .score .grade,
.f-hot .list-wrap .item .detail .score .grade,
.n-hot .list-wrap .item .detail .score .grade {
  font-weight: 700;
  color: #faaf00;
  font-size: 0.3rem;
}
</style>